<!--
  权限包装组件
  用于包装需要权限控制的内容
-->
<template>
  <div v-if="hasAuth" class="permission-wrapper">
    <slot />
  </div>
  <div v-else-if="showFallback" class="permission-fallback">
    <slot name="fallback">
      <el-empty 
        description="您没有权限访问此内容" 
        :image-size="100"
      />
    </slot>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { hasPermission, hasAnyPermission, isAdmin, isAuthenticated } from '@/utils/auth'

const props = defineProps({
  // 权限类型：permission | admin | auth | role
  type: {
    type: String,
    default: 'permission',
    validator: (value) => ['permission', 'admin', 'auth', 'role'].includes(value)
  },
  // 权限值
  value: {
    type: [String, Array],
    default: null
  },
  // 是否显示无权限时的占位内容
  showFallback: {
    type: Boolean,
    default: false
  }
})

// 计算是否有权限
const hasAuth = computed(() => {
  switch (props.type) {
    case 'admin':
      return isAdmin()
    case 'auth':
      return isAuthenticated()
    case 'role':
      const user = JSON.parse(localStorage.getItem('user') || '{}')
      const userRole = user.role
      if (Array.isArray(props.value)) {
        return props.value.includes(userRole)
      }
      return userRole === props.value
    case 'permission':
    default:
      if (!props.value) return true
      if (Array.isArray(props.value)) {
        return hasAnyPermission(props.value)
      }
      return hasPermission(props.value)
  }
})
</script>

<style lang="less" scoped>
.permission-wrapper {
  width: 100%;
  height: 100%;
}

.permission-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  width: 100%;
}
</style>
